<template>
	<El-row class="tac">
		<El-col :span="24">
			<El-menu :default-openeds="['1']" class="el-menu-vertical-demo" @open="handleOpen">
				<El-sub-menu v-for="item in arary" :index="item.id">
					<template #title v-if="item.menuType == 'title'">
						<span>{{item.lable}}</span>
					</template>
					<El-menu-item @click="handleMenu(obj)" v-for="obj in item.children" :index="obj.id">{{obj.lable}}</El-menu-item>
				</El-sub-menu>
			</El-menu>
		</El-col>
	</El-row>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue'
	import { useRouter,useRoute } from 'vue-router'
	import type { MenuItem } from "@/utils/jsType.d.ts"
	import muent from '@/router/muent.js'
	const router = useRouter();
	let arary: MenuItem[] = reactive([
		{
			lable:'导航菜单',
			menuType:'title',
			id:'1',
			children:[
				// {
				// 	lable:'音频可视化',
				// 	name:'AudioVisualization',
				// 	menuType:'',
				// 	id:'1_1',
				// 	path:'/audioVisualization'
				// },
				// {
				// 	lable:'分片上传',
				// 	menuType:'',
				// 	name:'Home',
				// 	id:'1_2',
				// 	path:'/'
				// },
				// {
				// 	lable:'添加水印',
				// 	menuType:'',
				// 	name:'About',
				// 	id:'1_3',
				// 	path:'/about'
				// }
			]
		}
	])
	muent.forEach((item,index)=>{
		let obj = {
			lable:item.mate.title,//'添加水印',
			menuType:'',
			name:item.name,
			id:'1_' + (index + 1),
			path:item.path
		}
		arary[0].children.push(obj)
	})
	const handleOpen = (key : string, keyPath : string[]) => {
		console.log(key, keyPath)
	}
	const handleMenu = (obj:MenuItem):void => {
		router.push({name: obj.name, path: obj.path})
	}
</script>
<style scoped>
	.el-menu{
		border-right: none;
	}
</style>
